<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>api列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<script src="/layui/layui.js"></script>


<table id="apiTable" lay-filter="listTable"></table>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<!--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#apiTable'
            ,height: 600
            ,url: '/api/show/getList' //数据接口
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [
                [
                {type:'checkbox'}
                ,{field: 'id', title: 'ID', width:250, sort: true}
                ,{field: 'apiType', title: '接口类型', width:80}
                ,{field: 'apiAction', title: '接口地址', width:400}
                ,{field: 'apiMethod', title: '请求方法', width:80}
                ,{field: 'apiService', title: '接口服务名', width: 80}
                ,{field: 'apiName', title: '接口名称', width: 200}
                ,{field: 'apiAuthor', title: '接口作者', width: 80}
                ,{field: 'moduleId', title: '所属模块', width: 100}
                ,{field: 'state', title: '状态 ', width: 60}
                ,{field: 'apiVersion', title: '版本', width: 60}
                ,{field: 'apiAuthentication', title: '鉴权等级', width: 80}
                ,{field: 'creatTime', title: 'creatTime', width: 135,hide:true}
                ,{field: 'updateTime', title: 'updateTime', width: 135,hide:true}
                ,{fixed: 'right', title: '操作',width:150, align:'center', toolbar: '#apiBar'}
            ]
            ]
            ,skin: 'row' //行边框风格 line row  nob
            ,even: true //开启隔行背景
            ,size: 'sm' //小尺寸的表格  lg
            ,page: true //是否显示分页
            ,limits: [30, 50, 100]
            ,limit: 50 //每页默认显示的数量
        });

        //头工具栏事件
        table.on('toolbar(listTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听工具条
        table.on('tool(listTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
                console.log("点击查看按钮")
                console.log(data)
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                console.log("点击编辑按钮")
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
    });
</script>

<!--工具栏-->
<script type="text/html" id="apiBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <!--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->

    <!--    &lt;!&ndash; 这里同样支持 laytpl 语法，如： &ndash;&gt;-->
    <!--    {{#  if(d.auth > 2){ }}-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>-->
    <!--    {{#  } }}-->
</script>
</body>
</html>